<template>
  <div class="gateway-header">
    <img src="@/assets/image/gateway/logo.png" alt="" class="header-logo">
    <div class="menu-list">

      <div v-for="item in menuList">
        <el-popover :disabled="item.children.length == 0" popper-class="menu-popover" placement="bottom" width="180"
          trigger="hover">
          <div class="menu-child-item" v-for="item1 in item.children" @click="toLink(item1.path)">
            {{item1.name}}
          </div>
          <span slot="reference">

            <div class="menu-item" @click="toLink(item.path)">
              {{item.name}}

            </div>
          </span>
        </el-popover>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'gateway-header',
    data() {
      return {
        menuList: [{
            name: '首页',
            path: "/gateway/home",
            children: [

            ]
          },
          {
            name: '就业实习',
            path: "/gateway/jiuye",
            children: [{
                name: '校园招聘',
                path: "/gateway/jiuye"
              },
              {
                name: '社会招聘',
                path: "/gateway/jiuye"
              },
              {
                name: '实习岗位',
                path: "/gateway/jiuye"
              }
            ]
          },
          {
            name: '团委管理',
            path: "/gateway/tuanwei",
            children: [{
                name: '团委情况',
                path: "/gateway/tuanwei"
              },
              {
                name: '学生会及成员',
                path: "/gateway/tuanwei"
              },
              {
                name: '实习岗位',
                path: "/gateway/tuanwei"
              }
            ]
          },
          {
            name: '消防管理',
            path: '/gateway/xiaofang',
            children: [{
                name: '培训演练',
                path: '/gateway/xiaofang',
              },
              {
                name: '安全巡检',
                path: '/gateway/xiaofang',
              },
              {
                name: '消防措施',
                path: '/gateway/xiaofang',
              },
              {
                name: '值班安排',
                path: '/gateway/xiaofang',
              },
              {
                name: '值班情况',
                path: '/gateway/xiaofang',
              }
            ]
          },
          {
            name: '资助情况',
            path: '',
            children: [{
              name: '自主情况',
              path: ''
            }]
          },
          {
            name: '职业技能',
            path: '',
            children: [{
                name: '公告发布',
                path: ''
              },
              {
                name: '报名管理',
                path: ''
              }
            ]
          },
          {
            name: '学校食堂',
            path: '',
            children: [{
              name: '每日菜谱',
              path: ''
            }]
          }
        ]
      }
    },
    components: {

    },
    methods: {
      toLink(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .gateway-header {
    width: 100%;
    height: 115px;
    // background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 168px;
    padding-right: 140px;
    box-sizing: border-box;

    .header-logo {
      flex-shrink: 0;
      margin-right: 20px;
      width: 557px;
    }

    ::-webkit-scrollbar {
      width: 6px;
      /* 设置滚动条的宽度 */
      background-color: #f9f9f9;
      /* 滚动条的背景色 */
    }

    /* 自定义滚动条轨道 */
    ::-webkit-scrollbar-track {
      background: #e1e1e1;
      /* 轨道的背景色 */
      border-radius: 10px;
      /* 轨道的圆角 */
    }

    /* 自定义滚动条的滑块（thumb） */
    ::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      /* 滑块的背景色 */
      border-radius: 10px;
      /* 滑块的圆角 */
      border: 2px solid #ffffff;
      /* 滑块边框 */
    }

    /* 当滑块悬停或活动时的样式 */
    ::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
      /* 悬停或活动状态下滑块的背景色 */
    }

    .menu-list {
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      // flex: 1;
      overflow-y: hidden;
      overflow-x: auto;
      height: 115px;

      .menu-item {
        height: 115px;
        margin: 0 31px;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
          color: #FF8533;
        }
      }
    }


  }

  .menu-child-item {
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;

    &:last-child {
      border: none;
    }

    &:hover {
      color: #FF8533;
    }
  }
</style>
